<template>
    <div class="a-table-page">
        <div class="top-content">
            <n-space v-if="topList.length">
                <div
                    class="container"
                    v-for="(item, index) in topList"
                    :key="index"
                >
                    <span class="label">{{
                        item.label ? `${item.label}：` : ""
                    }}</span>
                    <!-- 输入框 -->
                    <n-input
                        :placeholder="item.placeholder || undefined"
                        v-if="item.type === 'input'"
                        v-model:value="item.value"
                        :clearable="item.clearable"
                    />
                    <!-- 选择器 -->
                    <n-select
                        v-if="item.type === 'select'"
                        v-model:value="item.value"
                        :options="item.options"
                        :style="{ 'min-width': (item.minWidth || 160) + 'px' }"
                    />
                    <!-- 日期范围选择 -->
                    <n-date-picker
                        v-if="item.type === 'date-time-range'"
                        v-model:value="item.value"
                        type="datetimerange"
                        :clearable="item.clearable"
                        :is-date-disabled="item.dataDisabled"
                    />
                    <!-- 日期时间选择 -->
                    <n-date-picker
                        v-if="item.type === 'date-range'"
                        v-model:value="item.value"
                        type="daterange"
                        :clearable="item.clearable"
                        :is-date-disabled="item.dataDisabled"
                    />
                    <!-- 树型选择 -->
                    <n-tree-select
                        v-if="item.type === 'tree-select'"
                        v-model:value="item.value"
                        :options="item.options"
                        :clearable="item.clearable"
                    />
                </div>
                <n-button
                    type="primary"
                    @click="onSearch"
                    :loading="loading"
                    :disabled="loading"
                >
                    <template #icon>
                        <SearchOutlined class="icon" />
                    </template>
                    搜索
                </n-button>
                <n-button
                    v-if="showAdd"
                    @click="onAdd"
                    :loading="loading"
                    :disabled="loading"
                >
                    <template #icon>
                        <PlusOutlined class="icon" />
                    </template>
                    新增
                </n-button>
            </n-space>
        </div>
        <n-data-table :columns="columns" :data="tableData" :loading="loading" />
        <div class="pagination-content">
            <n-pagination
                :item-count="pagination.itemCount"
                :page-sizes="pagination.pageSizes"
                v-model:page-size="pagination.pageSize"
                showSizePicker
                @update:page="pageChange"
                @update:page-size="sizeChange"
            >
                <template #prefix="{ itemCount }">
                    共找到 {{ itemCount }} 条数据
                </template>
            </n-pagination>
        </div>
    </div>
</template>
<script>
import { ref, computed } from "vue";
import { SearchOutlined, PlusOutlined } from "@ant-design/icons-vue";
import * as API from "@/services";
import moment from "moment";

export default {
    components: {
        SearchOutlined,
        PlusOutlined,
    },
    props: {
        //表格头
        columns: {
            type: Array,
            default: () => [],
        },
        //顶部组件列表
        topList: {
            type: Array,
            default: () => [],
        },
        //请求地址方法
        apiMethod: {
            type: String,
            default: () => "",
        },
        //展示新增按钮
        showAdd: {
            type: Boolean,
            default: () => false,
        },
    },
    setup(props) {
        const columns = computed({
            get: () => props.columns,
        });

        const topList = computed({
            get: () => props.topList,
        });

        const apiMethod = computed({
            get: () => props.apiMethod,
        });

        const showAdd = computed({
            get: () => props.showAdd,
        });

        return {
            tableData: ref([
                {
                    id: 1,
                    name: "zz",
                    age: 18,
                },
            ]),
            columns,
            topList,
            apiMethod,
            loading: ref(false),
            showAdd,
            pagination: {
                page: 1,
                pageSize: 10,
                pageSizes: [10, 20, 50, 100],
                itemCount: 0,
            },
        };
    },
    mounted() {
        // this.getData();
    },
    methods: {
        //点击搜索按钮
        onSearch() {
            const { pagination } = this;
            this.pagination = {
                ...pagination,
                page: 1,
            };
            this.getData();
        },

        //切换分页
        pageChange(current) {
            const { pagination } = this;
            this.pagination = {
                ...pagination,
                page: current,
            };
            this.getData();
        },

        //切换分页大小
        sizeChange(size) {
            const { pagination } = this;
            this.pagination = {
                ...pagination,
                pageSize: size,
            };
            this.getData();
        },

        //获取数据
        async getData() {
            const { apiMethod, topList, pagination } = this;
            const _data = {};
            topList.map((item) => {
                if (item.key.indexOf("times") > -1 && item.value) {
                    _data.startTime = moment(item.value[0]).format(
                        "YYYY-MM-DD 00:00:00"
                    );
                    _data.endTime = moment(item.value[1]).format(
                        "YYYY-MM-DD 23:59:59"
                    );
                } else {
                    _data[item.key] = item.value;
                }
            });
            const data = {
                current: pagination.page,
                size: pagination.pageSize,
                data: _data,
            };
            this.loading = true;
            let res = await API[apiMethod](data);
            this.loading = false;
            if (res?.code === 200) {
                const { list, total } = res.data;
                // this.tableData = list;
                this.pagination = {
                    ...pagination,
                    itemCount: total,
                };
            }
        },

        //点击新增按钮
        onAdd() {
            this.$emit("add");
        },
    },
};
</script>
<style lang="less">
.a-table-page {
    .top-content {
        display: block;
        margin: 12px 0 5px;
        .container {
            display: flex;
            align-items: center;
            margin-bottom: 10px;
        }
        span.label {
            line-height: 34px;
            white-space: nowrap;
            margin-right: 8px;
        }
        .icon {
            font-size: 15px;
            height: 15px;
        }
    }
    .pagination-content {
        margin-top: 15px;
        .n-pagination {
            justify-content: flex-end;
        }
    }
}
</style>
